.globalHeader {
  @apply flex flex-nowrap justify-center w-screen h-20 border-b border-gray-200;
  background-color: var(--custom-bg);
  color: var(--custom-font);
  fill: var(--custom-font);
  border-color: var(--transparent-border);
  overflow: hidden;
}

.darkmode,
.language {
  @apply flex justify-center items-center w-7 h-7 rounded-md;

  &:hover {
    background-color: var(--transparent-border);
  }
}

.burger {
  @apply absolute left-[4%] w-[40px] h-[30px] bg-transparent cursor-pointer z-50;
  transform: scale(0.6);

  :global {
    input {
      display: none;
    }

    span {
      @apply block absolute w-full h-[4px] bg-black rounded-lg opacity-100 left-0;
      background-color: var(--custom-font);
      transform: rotate(0deg);
      transition: 0.25s ease-in-out;
    }

    span:nth-of-type(1) {
      top: 0px;
      transform-origin: left center;
    }

    span:nth-of-type(2) {
      top: 50%;
      transform: translateY(-50%);
      transform-origin: left center;
    }

    span:nth-of-type(3) {
      top: 100%;
      transform-origin: left center;
      transform: translateY(-100%);
    }

    input:checked ~ span:nth-of-type(1) {
      transform: rotate(45deg);
      top: 0px;
      left: 5px;
    }

    input:checked ~ span:nth-of-type(2) {
      width: 0%;
      opacity: 0;
    }

    input:checked ~ span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 28px;
      left: 5px;
    }
  }
}
